<template>
  <div>
    <el-form label-width="100px">
      <el-form-item label="SPU名称">
        <el-input
          placeholder="请你输入SPU名称"
          style="width: 240px"
          v-model="SpuParams.spuName"
        ></el-input>
      </el-form-item>
      <el-form-item label="SPU品牌">
        <el-select style="width: 240px">
          <el-option
            v-for="(item, index) in allTradeMarkList"
            :key="item.id"
            :label="item.tmName"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="SPU描述">
        <el-input
          type="textarea"
          placeholder="请输入SPU的描述"
          v-model="SpuParams.description"
        ></el-input>
      </el-form-item>
      <el-form-item label="SPU图标">
        <!-- v-model:file-list展示默认照片墙 -->
        <el-upload
          v-model:file-list="imgList"
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <el-icon>
            <Plus />
          </el-icon>
        </el-upload>
        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
      </el-form-item>

      <el-form-item label="SPU销售属性">
        <el-select style="width: 240px">
          <el-option label="华为"></el-option>
          <el-option label="OPPO"></el-option>
          <el-option label="VIVO"></el-option>
        </el-select>
        <el-button
          style="margin-left: 10px"
          type="primary"
          size="default"
          icon="Plus"
        >
          添加销售属性
        </el-button>
        <!-- 展示销售属性与属性值 -->
        <el-table border style="margin: 10px 0px">
          <el-table-column
            label="序号"
            type="index"
            align="center"
            width="80px"
          ></el-table-column>
          <el-table-column label="销售属性名字" width="120px"></el-table-column>
          <el-table-column label="销售属性值"></el-table-column>
          <el-table-column label="操作" width="120px"></el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="default">保存</el-button>
        <el-button type="primary" size="default" @click="cancel">
          取消
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import type { SpuData } from '@/api/product/spu/type'
import {
  reqAllSaleAttr,
  reqSpuHasSaleAttr,
  reqSpuImageList,
  reqAllTradeMark,
} from '@/api/product/spu'

import type {
  HasSaleAttr,
  SaleAttr,
  SpuImg,
  Trademark,
  AllTradeMark,
  SpuHasImg,
  SaleAttrResponseData,
  HasSaleAttrResponseData,
} from '@/api/product/spu/type'

//儿子给父
let $emit = defineEmits(['changeScene'])
//点击取消，通知父组件切换场景0
const cancel = () => {
  $emit('changeScene', 0)
}

//这里不能发请求
onMounted(() => {
  console.log(123) //使用v-show展示，已经加载了
})

//存储已有SPU
let allTradeMarkList = ref<Trademark[]>([])
//商品图片
let imgList = ref<SpuImg[]>([])
//已有销售属性
let saleAttr = ref<SaleAttr[]>([])
//全部销售属性
let allSaleAttr = ref<HasSaleAttr[]>([])
//存储已有的SPU对象
let SpuParams = ref<SpuData>({
  category3Id: '', //收集三级分类的ID
  spuName: '', //SPU的名字
  description: '', //SPU描述
  tmId: '', //品牌id
  spuImageList: [],
  spuSaleAttrList: [],
})

//子组件方法
const initHasSpuData = async (spu: SpuData) => {
  //存储已有的SPU对象，将来在模板中展示
  SpuParams.value = spu

  console.log('spu', spu)
  //spu是父组件传过来的已有的spu对象：不完整的
  //获取全部品牌
  let result: AllTradeMark = await reqAllTradeMark()
  console.log('result:', result)
  //获取某个品牌下的全部售卖的商品图片
  let result1: SpuHasImg = await reqSpuImageList(spu.id as number)
  console.log('result1:', result1)
  //获取已有spu的销售属性
  let result2: SaleAttrResponseData = await reqSpuHasSaleAttr(spu.id as number)
  console.log('result2:', result2)
  //所有的SPU销售属性
  let result3: HasSaleAttrResponseData = await reqAllSaleAttr()
  console.log('result3:', result3)

  //存储全部品牌的数据
  allTradeMarkList.value = result.data
  //存储图片
  imgList.value = result1.data
  //存储销售属性
  saleAttr.value = result2.data
  //存储所有销售属性
  allSaleAttr.value = result3.data
}

//对外暴露
defineExpose({ initHasSpuData })
</script>

<style></style>
